<template>
	<navigator :url="'/pagesA/major-js/major-js?id='+item.id+'&name='+item.name"
		style="display: flex;justify-content: flex-start;background-color: #fff;border-radius: 20rpx;margin-bottom: 20rpx;"
		:style="{borderTopRightRadius:index==0?'0':'20rpx',borderTopLeftRadius:index==0?'0':'20rpx'}">
		<view style="margin:0rpx 10rpx;display: flex;align-items: center;">
			<image :src="item.icon" class="project-image"></image>
		</view>
		<view style="width:75%;margin-left: 10rpx;">
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top:10rpx">
				<view class="project-title">
					<label>{{item.name}}</label>
					<u-tag v-if="item.tag" type="success" size="mini" :text="item.tag" shape="square" bgColor="#edfff1"
						color="#24c373" borderColor="#edfff1"
						:customStyle="{'margin-left':'10rpx','height':'32rpx','line-height':'32rpx','font-size':'20rpx'}">
					</u-tag>
				</view>
				<view class="num-view">超{{item.num}}人选择</view>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
				<view class="project-tips">{{item.tips}}</view>
				<view class="button-view">选择技师</view>
			</view>
			<view>
				<view class="project-price">
					<view class="rmb-icon" v-if="false">￥</view>
					<view class="price-true" v-if="false">{{item.original}}</view>
					<view class="price-false" style="color: red;font-weight: bold;">￥{{item.price}}</view>
					<view style="margin-left: 20rpx;">
						<u-icon name="clock-fill" size="15" color="#24c373" labelSize="12" :label="item.timer+'分钟'"
							labelColor="#999"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</navigator>
</template>

<script>
	export default {
		props: {
			item: {
				default: () => {
					return {}
				}
			},
			index: {
				default: 1
			}
		},
		methods: {
			selectTeacher() {
				// Your logic for selecting a teacher
			}
		}
	}
</script>

<style>
	.num-view {
		color: #999;
		font-size: 20rpx;
		/* margin-top: 16rpx; */
		text-align: center;
		margin-right: 20rpx;
	}

	.project-image {
		width: 200rpx;
		height: 155rpx;
		border-radius: 20rpx;
		margin: 10rpx 0rpx;
	}

	.project-title {
		font-weight: bold;
		font-size: 30rpx;
		/* margin-top: 8rpx; */
		display: flex;
		align-items: center;
	}

	.project-tips {
		font-size: 24rpx;
		color: #999;
		height: 40rpx;
		line-height: 40rpx;
		/* margin:8rpx 0rpx; */
	}

	.project-price {
		display: flex;
		align-items: baseline;
		/* margin-top: 10rpx; */
	}

	.button-view {
		width: 140rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		background: #24c373;
		color: #fff;
		border-radius: 16rpx;
		font-size: 26rpx;
		margin-right: 10rpx;
		/* margin-top: 30rpx; */
	}
</style>